<template>
<div id="app">
  <div class="page-container">
    <md-app md-mode="reveal">
      <md-app-toolbar class="md-primary">
        <md-button class="md-icon-button" @click="menuVisible = !menuVisible" v-if="auth">
          <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">每日最佳影评</span>
        <div class="top-center">
          <nav class="top-nav-link">
            <md-button to="/" class="btn">首页</md-button>
            <md-button to="/movies" class="btn">电影</md-button>
            <md-button to="/" class="btn">短评</md-button>
            <md-button to="/explore" class="btn">发现</md-button>
          </nav>
        </div>
        <div class="search-box">
          <md-autocomplete
            class="search"
            v-model="search"
            :md-options="employees"
            md-layout="box"
            @md-changed="searchSubmit">
            <label>Search...</label>
          </md-autocomplete>
        </div>
        <div class="login-btns" v-if="!auth">
          <md-button to="/auth/login" class="btn">登录</md-button>
          <md-button to="/auth/register" class="btn">注册</md-button>
        </div>
        <div class="login-btns" v-if="auth">
          <md-button class="btn">{{ user.name }}</md-button>
          <md-button @click="logout" class="btn">注销</md-button>
        </div>
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible" v-if="auth">
        <md-toolbar class="md-transparent" md-elevation="0">Navigation</md-toolbar>

        <md-list>
          <md-list-item>
            <md-icon>move_to_inbox</md-icon>
            <span class="md-list-item-text">Inbox</span>
          </md-list-item>

          <md-list-item>
            <md-icon>send</md-icon>
            <span class="md-list-item-text">Sent Mail</span>
          </md-list-item>

          <md-list-item>
            <md-icon>delete</md-icon>
            <span class="md-list-item-text">Trash</span>
          </md-list-item>

          <md-list-item>
            <md-icon>error</md-icon>
            <span class="md-list-item-text">Spam</span>
          </md-list-item>
        </md-list>
      </md-app-drawer>
      <md-app-content>
        <transition mode="out-in">
          <router-view />
        </transition>
      </md-app-content>
    </md-app>
  </div>
</div>
</template>

<style lang="scss" scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
}
.md-app {
  height: 100vh;
}
.md-drawer {
  width: 230px;
  max-width: calc(100vw - 125px);
}
.top-center {
  flex: 1;
}
.search-box {
  flex: 1;
  .search {
    max-width: 333px;
  }
}
.top-nav-link {
  display: flex;
  margin-left: 5rem;
}
.login-btns {
  .btn {
    width: 24px;
  }
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>

<script>
import { mapState } from 'vuex'
export default {
  data: () => ({
    menuVisible: false,
    isLogin: false,
    transitionName: 'slide-left',
    message: null,
    showMessage: false,
    search: null,
    oldSearch: null,
    employees: []
  }),
  computed: {
    // 使用对象展开运算符，将 mapState 对象混入到计算属性之中
    ...mapState([
      // 映射 this.auth 为 store.state.auth
      'auth',
      // 映射 this.user 为 store.state.user
      'user'
    ])
  },
  methods: {
    logout() {
      this.$store.dispatch('logout')
    },
    showMsg(msg) {
      this.message = msg
      this.showMessage = true
    },
    async checkLogined() {
      let logined = await this.$ajax.checkLogined()
      this.$store.dispatch('update_auth', logined)
    },
    searchSubmit() {
      if (this.search !== this.oldSearch) {
        this.$router.push({ path: '/movies', query: { search: this.search }})
      }
    }
  },
  watch: {//使用watch 监听$router的变化
    async $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
	    //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
      console.log('检测登录态')
      await this.checkLogined()
    }
  },
  async created() {
    console.log('检测登录态')
    await this.checkLogined()
    if('search' in this.$route.query) {
      this.search = this.oldSearch = this.$route.query.search
    }
  }
}
</script>

